<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<style>
    .pen {
        font-size: 50px;
        color: blueviolet;
        font-weight: bold;
    }

    .penTwo {
        font-size: 50px;
        color: rgb(240, 52, 28);
        font-weight: bold;
    }

    .penTree {
        width: 100px;
        height: 100px;
        background: rgb(247, 186, 247);
    }
</style>

<body>
    <div id="app">
        <!-- v-for -->

        <!-- =====================
        <br>
        <div v-for="(item,index) in forData" :key="index">{{item}}---{{index}}</div>
        <br>
        ================
        <br>
        <div v-for="(item2,index2) in forData2" :key="item2">{{item2}}---{{index2}}</div>
        <br>
        ================
        <br>
        <div v-for="(item3,index3) in forData3" :key="item3.id">{{item3}}---{{index3}}</div>
        <br>
        ================
        <br>
        <div v-for="(item4,index4) in forData4" :key="item4.id">{{item4.cellphone}}---{{index4}}</div>
        <br>
        =====================  -->
        <!-- v-if/v-show-->

        <!-- =====================
        <br>
        <button @click="flag = !flag">点击</button>
        <div v-if="flag">v-if</div>
        <div v-show="flag">v-show</div>
        <br>
        ===================== -->
        <!-- v-bind -->

        <!-- =====================
        <br>
        <div class="pen">笔</div>
        <div :class="pen">笔</div>
        <div :class="[pen,pen2]">笔</div>
        <div :class="{pen:true}">笔</div>
        <br>
        ===================== -->
        <br>
        <form action="">
            <label for=""></label>
            <input type="text" v-model="sp">
            <span>{{sp}}</span>
            <br>
            ================
            <br>
            <label for=""></label>
            <input type="text" :value="spr" @input="modelFun">
            <span>{{spr}}</span>
            <br>
            ================
            <br>
            <label for="">选择</label>
            <input type="checkbox" :checkbox="checkFlag" @change="checkFlag = !checkFlag">
            <span>{{checkFlag}}</span>
            <br>
            ================
            <br>
            <label for="">下拉</label>
            <select name="" id="selecv" ref="selecn" :value="selec" @change="selecFun">
                <option v-for="i in forData4" :key="i.id" :value="i.cellphone">{{i.cellphone}}</option>

            </select><span>{{selec}}</span>
        </form>

    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    forData: [120, 140, 135, 189, 198],
                    forData2: 'blue sky',
                    forData3: {
                        cellphone: 'mi',
                        id: 102
                    },
                    forData4: [{
                            cellphone: 'mi',
                            id: 112
                        },
                        {
                            cellphone: 'vivo',
                            id: 113
                        },
                        {
                            cellphone: 'iphone',
                            id: 114
                        },
                    ],
                    flag: false,
                    pen: 'penTwo',
                    pen2: 'penTree',
                    sp: 115,
                    spr: 115,
                    checkFlag: false,
                    selec: 'mi'
                }
            },
            methods: {
                modelFun(e) {
                    console.log('lll');
                    this.spr = e.target.value
                },
                selecFun() {
                    let myselect = document.getElementById("selecv")
                    let index = myselect.selectedIndex
                    let v = myselect.options[index].value
                    this.selec = v
                }
            }
        })
    </script>

</body>

</html>